#{extends 'logged_user.html' /}
#{set title:'Create Offer' /}

#{set 'moreStyles'}
<link rel="stylesheet" type="text/css" media="screen" href="@{'/public/stylesheets/datepicker.css'}">
<link rel="stylesheet" type="text/css" media="screen" href="@{'/public/stylesheets/ui-lightness-20/jquery-ui-1.8.20.custom.css'}">
<link rel="stylesheet" type="text/css" media="screen" href="@{'/public/stylesheets/jquery.tagedit.css'}">
#{/set}

#{set 'moreScripts'}
<script src="@{'/public/javascripts/jquery-ui-1.8.20.custom.min.js'}" type="text/javascript" charset="${_response_encoding}"></script>
<script src="@{'/public/javascripts/jquery-ui-timepicker-addon.js'}" type="text/javascript" charset="${_response_encoding}"></script>
<script src="@{'/public/javascripts/jquery.autoGrowInput.js'}" type="text/javascript" charset="${_response_encoding}"></script>
<script src="@{'/public/javascripts/jquery.tagedit.js'}" type="text/javascript" charset="${_response_encoding}"></script>
<script src="@{'/public/javascripts/create-offer.js'}" type="text/javascript" charset="${_response_encoding}"></script>
<script src="@{'/public/javascripts/gmaps.js'}" type="text/javascript" charset="${_response_encoding}"></script>
<script src="http://www.google.com/jsapi" type="text/javascript" charset="${_response_encoding}" ></script>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCG9Kc_QV1stkM1sPMZqdkPmXfb47u_HFc&sensor=false" type="text/javascript" charset="${_response_encoding}"  ></script>
#{/set}

#{if offerItem.id}
<h3 style="padding-top:0px;">Edit Offer</h3>
<p>Use the form below to edit your offer.</p>
#{/if}
#{else}
<h3 style="padding-top:0px;">Create New Offer</h3>
<p>Use the form below to create a new offer.</p>
#{/else}

<form action="@{Offers.doCreate()}" method="POST" class="utility_form taggable">
<input type="hidden" name="offerItem.id" value="${offerItem.id}" />
<fieldset>
<ul>
    <li>
        <label style="padding-top:7px">Title</label>
        <input tabindex="1" style="width:200px;" type="text" name="offerItem.title" value="${offerItem.title}" required="required" rel="tooltip" title="This field is required. Try to find a descriptive title." data-placement="right" />
        <span class="error">#{error 'offerItem.title' /}</span>
    </li>
    <li>
        <label style="padding-top:7px">Tags</label>
        <input id="tags" style="width:200px;" type="text" name="tags[]" value="${offerItem.tags.join(' ')}"  required="required" rel="tooltip" title="This field is required. You'll have tag suggestions. You can select the one you want from the list. Custom tags are not allowed. Also, you should seperate tags with comma (,)." data-placement="right" />
        <span class="error">#{error 'offerItem.tags' /}</span>
    </li>
    <li>
        <label style="padding-top:7px">Description</label>
        <textarea rows="5" style="width:330px" name="offerItem.description" tabindex="3">${offerItem.description}</textarea>
        <span style="position: absolute; padding-top:40px" class="error">&nbsp;#{error 'offerItem.description' /}</span>
    </li>
    <li id="liDuration">
        <label style="padding-top:7px">Duration</label>
        <input type="text" style="width:100px;"name="offerItem.duration" value="${offerItem.duration}" tabindex="4" />
        <span class="error">#{error 'offerItem.duration' /}</span>in hours/<span class="tip" rel="tooltip" title="A single period of a service">session</span>
    </li>
    <li>
        <label style="padding-top:7px">Number of <span class="tip" rel="tooltip" title="A participant is the one who takes service from you">participant</span>s</label>
        <span id="numberOfParticipants">${offerItem.minNumberOfParticipants} - ${offerItem.maxNumberOfParticipants}</span>&nbsp;&nbsp;
        <input id="txt_minNumberOfParticipants" type="hidden" style="width:50px;" type="text" name="offerItem.minNumberOfParticipants" value="${offerItem.minNumberOfParticipants}"/>
        <input id="txt_maxNumberOfParticipants" type="hidden" style="width:50px;" type="text" name="offerItem.maxNumberOfParticipants" value="${offerItem.maxNumberOfParticipants}"/>
        <div id="participantsSlider" style="display: inline-block; width: 300px;"></div>
    </li>
    <li style="display:inline-block;">
        <label style="padding-top:7px">When does it start?</label>
        <input id="txt_startsAt" type="text" name="offerItem.startsAt" class="date_pick" value="${offerItem.startsAt}" tabindex="5" rel="tooltip" title="When would you like to get this service for the first time?" data-placement="right" />
        <span class="error">#{error 'offerItem.startsAt' /}</span>
    </li>
    <li style="display:inline-block;">
        <label style="padding-top:7px">Until when is it needed?</label>
        <input id="txt_val_until" type="text" name="offerItem.endsAt" class="date_pick" value="${offerItem.endsAt}" tabindex="6" rel="tooltip" title="Until when this service should be carried out?" data-placement="right" />
        <span class="error">#{error 'offerItem.endsAt' /}</span>
    </li>
    <li>
        <label style="padding-top:7px">Is time dependent?</label>  
        <select id="ddlTimeDependant" tabindex="7" rel="tooltip" title="Do you need to define time constraints on the service? (You may set the service as repeating daily, weekly or define custom periods for repeating)" data-placement="right">
            <option value="0" selected="selected">No</option>
            <option value="1">Yes</option>              
        </select>
        <input id="chkVirtualization" style="visibility: hidden; display: none" type="checkbox" name="offerItem.is_virtual" ${offerItem.isVirtual ? 'checked': ''}  />  
    </li>
    <li class="timeSpec showFirst hidden">
        <label style="padding-top:7px">Repeats</label>
        <select class="repeating" tabindex="8" id="select_repeats" name="reoccurrenceData.period">
            <option value="never">Never</option>
            <option value="daily">Daily</option>
            <option value="weekly">Weekly</option>
        </select>
    </li>
    <li class="timeSpec related_repeats related_repeatsDaily hidden">
        <label style="padding-top:7px">Repeat every</label>
        <select class="repeating" tabindex="9" id="select_repeatEveryNDay" name="reoccurrenceData.repeatEveryNDay">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
            <option value="13">13</option>
            <option value="14">14</option>
            <option value="15">15</option>
            <option value="16">16</option>
            <option value="17">17</option>
            <option value="18">18</option>
            <option value="19">19</option>
            <option value="20">20</option>
            <option value="21">21</option>
            <option value="22">22</option>
            <option value="23">23</option>
            <option value="24">24</option>
            <option value="25">25</option>
            <option value="26">26</option>
            <option value="27">27</option>
            <option value="28">28</option>
            <option value="29">29</option>
            <option value="30">30</option>
        </select> days
    </li>
    <li class="timeSpec related_repeats related_repeatsWeekly hidden">
        <label style="padding-top:7px">Repeat every</label>
        <select class="repeating" tabindex="10" id="select_repeatEveryNWeek" name="reoccurrenceData.repeatEveryNWeek">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
            <option value="13">13</option>
            <option value="14">14</option>
            <option value="15">15</option>
            <option value="16">16</option>
            <option value="17">17</option>
            <option value="18">18</option>
            <option value="19">19</option>
            <option value="20">20</option>
            <option value="21">21</option>
            <option value="22">22</option>
            <option value="23">23</option>
            <option value="24">24</option>
            <option value="25">25</option>
            <option value="26">26</option>
            <option value="27">27</option>
            <option value="28">28</option>
            <option value="29">29</option>
            <option value="30">30</option>
            <option value="31">31</option>
            <option value="32">32</option>
            <option value="33">33</option>
            <option value="34">34</option>
            <option value="35">35</option>
            <option value="36">36</option>
            <option value="37">37</option>
            <option value="38">38</option>
            <option value="39">39</option>
            <option value="40">40</option>
            <option value="41">41</option>
            <option value="42">42</option>
            <option value="43">43</option>
            <option value="44">44</option>
            <option value="45">45</option>
            <option value="46">46</option>
            <option value="47">47</option>
            <option value="48">48</option>
            <option value="49">49</option>
            <option value="50">50</option>
            <option value="51">51</option>
            <option value="52">52</option>
        </select> weeks
    </li>
    <li class="timeSpec related_repeats related_repeatsWeekly hidden">
        <label style="padding-top:7px;display:inline-block;">Repeat on</label>
        <div style="display:inline-block;float:left;">
            <input type="checkbox" tabindex="11" class="repeating checkboxHack" name="reoccurrenceData.mon" value="1" />Mon
            <input type="checkbox" tabindex="12" class="repeating checkboxHack" name="reoccurrenceData.tue" value="1" />Tue
            <input type="checkbox" tabindex="13" class="repeating checkboxHack" name="reoccurrenceData.wed" value="1" />Wed
            <input type="checkbox" tabindex="14" class="repeating checkboxHack" name="reoccurrenceData.thu" value="1" />Thu
            <input type="checkbox" tabindex="15" class="repeating checkboxHack" name="reoccurrenceData.fri" value="1" />Fri
            <input type="checkbox" tabindex="16" class="repeating checkboxHack" name="reoccurrenceData.sat" value="1" />Sat
            <input type="checkbox" tabindex="17" class="repeating checkboxHack" name="reoccurrenceData.sun" value="1" />Sun
            
            <span class="checkboxHack">
                <input type="hidden" name="reoccurrenceData.mon" value="0" />
                <input type="hidden" name="reoccurrenceData.tue" value="0" />
                <input type="hidden" name="reoccurrenceData.wed" value="0" />
                <input type="hidden" name="reoccurrenceData.thu" value="0" />
                <input type="hidden" name="reoccurrenceData.fri" value="0" />
                <input type="hidden" name="reoccurrenceData.sat" value="0" />
                <input type="hidden" name="reoccurrenceData.sun" value="0" />
            </span>
        </div>
    </li>
    <li class="timeSpec related_repeats related_repeatsDaily related_repeatsWeekly hidden">
        <label style="padding-top:7px;display:inline-block;">Ends</label>
        <div style="display:inline-block;float:left;">
            <input type="radio" tabindex="18" class="repeating" name="reoccurrenceData.ends" value="never" />Never<br />
            <input type="radio" tabindex="19" class="repeating" name="reoccurrenceData.ends" value="occurrenceCount" />After <input id="repeat_occurrences" tabindex="20" type="text" name="reoccurrenceData.occurrenceCount" class="repeating" value="" /> occurrences<br />
            <input type="radio" tabindex="21" class="repeating" name="reoccurrenceData.ends" value="on" />On <input id="repeat_endsAt" tabindex="22" type="text" name="reoccurrenceData.endsAt" class="date_pick repeating" value="${reoccurrenceData.endsAt}" />
        </div>
    </li>
    <li class="timeSpec showFirst hidden">
        <label style="padding-top:7px">Repeat summary</label>
        <span id="summary"></span>
    </li>
    <li>
        <label style="padding-top:7px">Is Virtual?</label>  
        <select id="ddlVirtualization" tabindex="30" rel="tooltip" title="Will the service carried out online (e.g. via webcam, IMs)?" data-placement="right">
            <option value="0">No</option>
            <option value="1" selected="selected">Yes</option>              
        </select>
        <input id="chkVirtualization" style="visibility: hidden; display: none" type="checkbox" name="offerItem.is_virtual" ${offerItem.isVirtual ? 'checked': ''}  />  
    </li>
    <li class="location hidden">
        <label style="padding-top:7px">Range</label> 
        <input id="txt_range" type="hidden" name="offerItem.rangeFromLocation" value="${offerItem.rangeFromLocation}" /><span id="rangeValue">${offerItem.rangeFromLocation}</span>  KM&nbsp;&nbsp;   
        <div id="rangeSlider" style="display: inline-block; width: 300px;"></div>
    </li>
    <li class="location hidden">
        <input id="txt_location"  type="hidden" name="offerItem.location" value="${offerItem.location}" />
        <div id="map_canvas" style="width:600px; height:280px"></div>
    </li>
</ul>
</fieldset>
<button type="submit" class="btn btn-primary">Create Offer</button>
</form>
